<!-- 轮播图封装 -->
<template>
    <!-- 轮播图 -->
    <div class="focus swiper-container" ref="mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(carousel) in list" :key="carousel.id">
                <img :src="carousel.imgUrl" />
            </div>
        </div>
        <!-- 如需分页器 -->
        <div class="swiper-pagination">
        </div>
        <!-- 如需导航按钮 -->
        <div class="swiper-button-prev">
        </div>
        <div class="swiper-button-next">
        </div>
    </div>
</template>

<script>
import Swiper from "swiper"
export default {
    name:"CarouselIndex",
    props:["list"],    //可能是从其他组件接受的数据

    watch: {
        // watch在bannerList数据发生改变时会立即调用 
        list: {
            immediate:true,  // floor 中的数据是其父组件传过来的，如果不立即执行的话，他里面的数据是不会发生变化的

            // 直接调用这个,而不用nextTick的话，只能保证v-for里面有数据，不能保障所有的数据加载完
            handler() {

                // nextTick 钩子函数 作用是在下次 DOM 更新循环结束之后执行延迟回调。保障v-for 循环结束。
                this.$nextTick(() => {
                    // 写swiper实例 1、注意不可以放在mounted()中，因为没有数据；2、可以使用setTimeout定时器写，但存在小圆点不能及时出现的问题 
                    // 3、watch在bannerList数据发生改变时会立即调用 直接放在watch里存在着v-for里面的数据没有执行完的情况！
                    var mySwiper = new Swiper(
                        this.$refs.mySwiper, {
                        autoplay: true, //可选选项，自动滑动
                        loop: false, //设置 active slide 居中后，会有左右留白现象，添加此会让未尾的导航补齐前后空白
                        // 如需分页器
                        pagination: {
                            el: '.swiper-pagination', //使用分页器（小点）
                            clickable: true, //点击小点出现效果
                        },
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    })
                })

            }

        }

    }

}
</script>

<style>
</style>